<template>
  <div id="page">
    <!-- 顶部 -->
    <div id="header_top">
      <p class="iconfont">&#xe6bc;</p>
      <p>小U商城</p>
      <p>
        <span class="iconfont">&#xf0112; </span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>
    </div>

    <!-- 头部-->
    <header>
      <span class="iconfont">&#xe613;</span>
      <h1>
        <img src="../../../assets/images/logo.jpg" alt="" />
      </h1>
      <input @keydown="keydown" type="text" class="iconfont" placeholder="按内容搜索" />
      <span class="iconfont">&#xe663;</span>
    </header>

    <!-- 导航 -->
    <nav>
      <ul>
        <li class-active="cur" v-for="item in cate" :key="item.id" @click="catechilck(item.id)">
          <span href="">{{ item.catename }}</span>
        </li>
      </ul>
      <p>
        <span class="iconfont">&#xe611;</span>
        分类
      </p>
    </nav>

    <!-- 滑轮区域 -->
    <div id="roll">
      <!-- 海报 -->
      <div id="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in banner" :key="item.id"
            ><img :src="$pre + item.img" alt="" width="100%"
          /></van-swipe-item>
        </van-swipe>
      </div>

      <!-- 列表 -->
      <div id="list">
        <ul>
          <li>
            <img src="../../../assets/images/icon_1.jpg" alt="" />
            <p>限时秒杀</p>
          </li>
          <li>
            <img src="../../../assets/images/icon_2.jpg" alt="" />
            <p>畅销商品</p>
          </li>
          <li>
            <img src="../../../assets/images/icon_3.jpg" alt="" />
            <p>品质大牌</p>
          </li>
          <li>
            <img src="../../../assets/images/icon_4.jpg" alt="" />
            <p>小U自营</p>
          </li>
          <li>
            <img src="../../../assets/images/icon_5.jpg" alt="" />
            <p>积分商城</p>
          </li>
        </ul>
      </div>

      <!-- 内容 -->
      <main>
        <!-- 限时秒杀 -->
        <div class="seckill">
          <div class="seckill_l">
            <p>
              <span>限时秒杀</span>
              <span class="iconfont">&#xe601;</span>
              <span>查看更多</span>
            </p>
            <p>每天0点场，好货秒不停</p>
            <p>
              <span>05</span>
              <span>:</span>
              <span>20</span>
              <span>:</span>
              <span>38</span>
            </p>
          </div>
          <p class="seckill_r">
            <img src="../../../assets/images/shop_bg2.png" alt="" />
            <img src="../../../assets/images/shop_bg3.png" alt="" />
          </p>
        </div>

        <!-- 商品 -->
        <div class="shop">
          <p>
            <span class="cur">双11尖货预购</span>
            <span>畅销全球</span>
          </p>
          <ul>
            <li><img src="../../../assets/images/shop.jpg" alt="" /></li>
            <li><img src="../../../assets/images/shop.jpg" alt="" /></li>
            <li><img src="../../../assets/images/shop.jpg" alt="" /></li>
            <li><img src="../../../assets/images/shop.jpg" alt="" /></li>
          </ul>
        </div>
        <van-tabs type="card">
          <van-tab title="热门商品">
            <van-card
              v-for="item in hot" :key='item.id'
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre+item.img"
              @click="hotss(item.id)"
            />
          </van-tab>
          <van-tab title="新品商品">
            <van-card
              v-for="item in news" :key='item.id'
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre+item.img"
              @click="newss(item.id)"
            />
          </van-tab>
          <van-tab title="推荐商品"
            ><van-card
              v-for="item in goods" :key='item.id'
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre+item.img"
              @click="goodss(item.id)"
          /></van-tab>
        </van-tabs>
      </main>
    </div>
    <!-- 尾部 -->
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import {gethortgoods} from '../../../utils/api'
export default {
  data() {
    return {
      hot:{},
      news:{},
      goods:{}
    }
  },
  methods: {
    ...mapActions({
      reqchangecate: "home/reqchangecate",
      reqchangebanner: "home/reqchangebanner",
    }),
    // 输入框按下跳转到搜索
    keydown(){
      this.$router.push('/search')
    },
    // 点击一级分类
    catechilck(id){
      this.$router.push('/search?type=1&id='+id)     
    },
    // 点击热门detail?id=1
    hotss(id){
      this.$router.push('/detail?id='+id)  
    },
    newss(id){
      this.$router.push('/detail?id='+id)  
    },
    goodss(id){
      this.$router.push('/detail?id='+id)  
    }
    // 
  },
  mounted() {
    this.reqchangecate(), this.reqchangebanner();
    gethortgoods().then(res=>{
      console.log(res);
      this.hot=res.data.list[0].content
      this.news=res.data.list[1].content
      this.goods=res.data.list[2].content
    })
  },
  computed: {
    ...mapGetters({
      cate: "home/cate",
      banner: "home/banner",
    }),
  },

};
</script>

<style scoped src='../../../assets/css/index.css'>
/* @import '../../../assets/css/index.css'; */
</style>